<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="2" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.address {
	overflow: hidden;
	padding: 80px 0 0;
}

.info {
	width: 35%;
	float: left;
	color: #39325e
}

.info .tit {
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: bold;
}

.info .en-tit {
	font-size: 18px;
	letter-spacing: 2px;
	margin: 15px 0 0;
	left: 0;
}

.info .line {
	height: 1px;
	width: 116px;
	background: #39325e;
	display: block;
	margin: 25px 0
}

.info li {
	height: 50px;
	font-size: 15px;
}

.info li img {
	margin-right: 18px;
	width: 18px;
}

.map {
	width: 60%;
	border: 2px solid #ddd;
	float: right
}

.map img {
	width: 100%;
}

.contact {
	margin-top: 50px;
	text-align: center
}

.contact h3 {
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.contact li {
	width: 33%;
	float: left;
	padding: 10px 0;
	text-align: left;
}

.contact li span {
	color: #000000;
	font-weight: bold;
}

.contact li input {
	border: 0px;
	border-bottom: 1px solid #afafaf;
	width: 280px;
	outline: 0;
}

input:focus {
	outline: 0px;
}

.contact li:last-of-type {
	width: 100%;
}

.contact li:last-of-type input {
	width: 94%;
	display: block;
}

.send {
	width: 188px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	color: #ffffff;
	background: #8575dc;
	margin: 40px auto 80px;
	display: inline-block;
	border-radius: 20px;
}

.send:hover {
	color: #ffffff;
}
 @media screen and (max-width: 768px) {
	.info,.map{width:100%}
	.contact li,.contact li input,.contact li:last-of-type input{width:100%}	    
}
</style>


</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	<cms:ad var="banner" code="lxwmBanner" multi="false"></cms:ad>
	<div class="banner">
		<img src="${banner.adImg }" alt="">
	</div>
	<cms:ad var="lxdh" code="lxdh" multi="false"></cms:ad>
	<cms:ad var="lxdz" code="lxdz" multi="false"></cms:ad>
	<cms:ad var="qq" code="lxqq" multi="false"></cms:ad>

	<div class="container">
		<div class="address">
			<div class="info">
				<h3 class="tit">公司地址</h3>
				<h3 class="en-tit">Our Offices</h3>
				<span class="line"></span>
				<ul>
					<li><img src="${path }/resource/images/adress.png" alt=""><span>${lxdz.adTitle}</span></li>
					<li><img src="${path }/resource/images/phone.png" alt="">
						<span>${lxdh.adTitle}</span></li>
					<li><img src="${path }/resource/images/qq.png" alt=""><span>${qq.adTitle}</span></li>
				</ul>
			</div>
			<div class="map">
				<cms:ad var="dt" code="dt" multi="false"></cms:ad>
				<img src="${dt.adImg }" alt="">
			</div>
		</div>
		<div class="contact">
			<h3>在线留言</h3>
			<ul>
				<li><span>称呼<sup>*</sup>：
				</span><input id="msgUserName" type="text"></li>
				<li><span>手机号<sup>*</sup>：
				</span><input id="msgTel" type="text"></li>
				</li>
				<li><span>主题<sup>*</sup>：
				</span><input id="msgType" type="text"></li>
				</li>
				<li><span>备注<sup>*</sup>：
				</span><input id="msgContent" type="text" class="txt"></li>
			</ul>
			<a href="javascript:void(0)" onclick="send()" class="send">发送给我们</a>
		</div>
	</div>
	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(".nav-item li").eq(7).addClass("active")
	function send() {
		$.ajax({
			data : {
				msgUserName : $("#msgUserName").val(),
				msgTel : $("#msgTel").val(),
				msgType : $("#msgType").val(),
				msgContent : $("#msgContent").val(),
			},
			type:"post",
			url : "${path}/addMsg",
			success : function() {
				alert("感谢您的反馈！");
			}
		});
	}
</script>
</body>
</html>
